<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: red;
}

#avatar {
  width: 200px;
  height: 200px;
  display: block;
}
</style>
<template>
  <div style="margin-left: 50%;transform: translateX(-55%)">
    <h3  style="margin-left: 68px;margin-bottom: 20px">修改头像</h3>
    <el-upload
        class="avatar-uploader"
        action="http://localhost:9999/zx-resource/resources/upload/image/product"
        :show-file-list="false"
        :on-success="handleAvatarSuccess">
      <img v-if="userIcon.icon" :src="userIcon.icon" id="avatar" alt="404">
      <i v-else class="el-icon-plus avatar-uploader-icon"/>
    </el-upload>
    <div style="margin-left: 68px;margin-top: 20px">
      <el-button type="primary" @click="updateConfirm">保存</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "iconUpdate",
  data() {
    return {
      userIcon: {
        id: "",
        icon: ""
      }
    }
  },
  methods: {
    updateConfirm() {
      let url = "http://localhost:9999/zx-ums/user/updateData"
      let data = this.qs.stringify(this.userIcon);
      this.axios.create(
          {'headers': {'Authorization': localStorage.getItem('userJwt')}}
      ).post(url, data).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state === 200) {
          this.$message({message: "数据已保存", type: "success"})
          localStorage.setItem("userIcon", this.userIcon.icon)
          location.reload()
        } else {
          this.$message({message: jsonResult.message, type: "error"})
        }
      })
    },
    //图片
    handleAvatarChange() {
      if (this.userData.icon === "" || this.userData.icon === null) {
      } else {
        let data = this.qs.stringify({"imageUrl": this.userData.icon})
        let url = "http://localhost:9999/zx-resource/resources/deleteImg"
        this.axios.create(
            {'headers': {'Authorization': localStorage.getItem('userJwt')}}
        ).post(url, data)
      }
    },
    handleAvatarSuccess(response) {
      this.userIcon.icon = response.data.url
    },
    loadIcon() {
      this.userIcon.icon = localStorage.getItem("userIcon");
    }
  },
  mounted() {
    this.loadIcon();
    this.userIcon.id = localStorage.getItem("userId")
  }
}
</script>

